import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    ListView,
    TouchableOpacity,
    ToastAndroid,
	Image,
	Dimensions,
	TextInput,
	Button,
 	ScrollView,
	FlatList,
	WebView,
	Alert,
	TouchableNativeFeedback,
	TouchableWithoutFeedback,
} from 'react-native';
import { Modal,TouchableHighlight,PixelRatio} from "react-native";
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
import Toast from './component/Toast';
import Loading from './component/Loading';
import BackImage from './component/BackImage';
import CostHisScene from './pay/CostHisScene';
import axiosInstance from './utils/request';


//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
const WIN_WIDTH = Dimensions.get('window').width;

class CostHisTabScene extends Component {



    constructor(props){
		super(props);
		this.state = {
			count:0,
			dataSource:'',
			animationType: 'none',//none slide fade
			modalVisible: false,//模态场景是否可见
			transparent: false,//是否透明显示
			bookId:this.props.navigation.state.params.bookId,
			currMonth:'',
			custCode:'',
			custName:'',
			address:'',
	 	};
	}

	setModalVisible = (visible) => {
    	this.setState({ modalVisible: visible });
    }

    //组件挂载完成后执行的方法
    componentDidMount(){
    	this.props.navigation.setOptions({
			title: '缴费退费'
		})
		this.props.navigation.setParams({ setModalVisible: this.setModalVisible });
    }

    //下载数据
	getData(pyCode,custCode,custName) {
		let url=global.server.url+'/custInfo/selectList';
		axiosInstance.post(url,
			{
				pyCode:pyCode,
				custCode:custCode,
				custName:custName,
				pageVO:{
					sort:'',
					order:''
				}
			}
		)
        .then(res => {
			let datas = [];
            datas = datas.concat(res);
			var dataSource= {
			  tab:'缴费',
			  list:datas
			}
			this.setState({
				custCode:'',
				custName:'',
				count:datas.length,
				dataSource:dataSource
			});
        })
        .catch(err => {
        	Toast.show("网络异常，请稍后再试！"+err);
        })
	}

	searchData(index){
		let pyCode=this.state.pyCode;
		let custCode=this.state.custCode;
		let custName=this.state.custName;
		if(index==0){
			this.getData(pyCode,custCode,custName);
		}
		this.setState({
			pyCode:'',
			custCode:'',
            custName:''
        });
		this.setModalVisible(false);
	}

    render() {
        //加载后
        return (
			<ScrollableTabView
				style={styles.container}
				tabBarUnderlineStyle={{backgroundColor:'#000000', height:1}}
				renderTabBar={()=><DefaultTabBar backgroundColor='rgba(135, 206 ,235, 0.5)' />}
				tabBarPosition='bottom'
				onChangeTab={
                    (obj) => {

                    }
                }
		     >

				<FlatList
					tabLabel ="缴费"
					data = {this.state.dataSource.list}
					renderItem = {({item}) =>
						<TouchableNativeFeedback
							onPress = {() => {
								this.props.navigation.navigate('PrepayScene', {custCode:item.custCode,currMonth:""})
						}}>
							<View style={styles.textMainStyle}>
								<Text style={styles.margin}>表本名称： {item.meterBooks.bookName}</Text>
								<Text style={styles.margin}>用户编号：{item.custCode}</Text>
								<Text style={styles.margin}>用户名称：{item.custName}</Text>
								<Text style={styles.margin}>用户地址：{item.address}</Text>
								<Text style={styles.margin}>联系电话：{item.tel}</Text>
							</View>
						</TouchableNativeFeedback>
					}
					ListHeaderComponent={this._renderHeader(0)}
					ListEmptyComponent={this.emptyComponent}
				/>

				<View style={styles.container} tabLabel ="退费">
					<CostHisScene/>
				</View>
		    </ScrollableTabView>
        );
    }

	emptyComponent() {
		return (
			<View style={{
				backgroundColor: 'white', flex: 1, height: 500, alignItems: 'center',
				justifyContent: 'center',
			}}>
				<Text>抱歉，没有符合条件的记录!</Text>
			</View>
		)
	}

	//渲染头部
	 _renderHeader = (index) => {
         return(
            <View>
				{
					this.state.loading==true?(
						<Loading/>
					):(null)
				}

				<View style={{
					height:35,
					flexDirection:'row',
					alignItems:'center',
					borderBottomWidth:1,
					borderBottomColor:'#D7D7D7',
					backgroundColor:"#F5FCFF",
					paddingLeft:6
				}}>
					<View style={styles.flex}>
						<Text style={styles.headerText}>总记录数：{this.state.count}</Text>
					</View>
					<View style={styles.flex}>
						<Text style={styles.headerText}></Text>
					</View>
					<View style={styles.flex }>
						<TouchableOpacity
							activeOpacity={0.5}
							onPress={this.setModalVisible.bind(this,true)}>
							<Image style={{height: 30, width: 30 ,marginRight:5}} source={require('../img/search01.png')}/>
						</TouchableOpacity>
					</View>
				</View>
				<View style={{alignItems:'center',flex:1}}>
					<Modal
						animationType={this.state.animationType}
						transparent={this.state.transparent}
						visible={this.state.modalVisible}
						onRequestClose={() => {
						  this.setModalVisible(false)
						}}
					 >
						<View style={[styles.modalContainer,{backgroundColor: 'rgba(0, 0, 0, 0.5)'}]}>
							<View style={[styles.innerContainer,{backgroundColor: '#F0F8FF', padding: 20}]}>
								<View style={styles.row}>
									<View >
									  <Text style={styles.tips}>请输入一个或多个条件</Text>
									</View>
									<TextInput
										style={styles.textInput}
										placeholder={'拼音码'}
										onChangeText={(text) => {
											this.pyCode = text;
											this.setState({pyCode: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
									<TextInput
										style={styles.textInput}
										placeholder={'用户名称'}
										onChangeText={(text) => {
											this.custName = text;
											this.setState({custName: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
									<TextInput
										style={styles.textInput}
										placeholder={'用户编号'}
										onChangeText={(text) => {
											this.custCode = text;
											this.setState({custCode: text})
										}}
										//输入框下划线
										underlineColorAndroid={'transparent'}/>
								</View>
								<View style={styles.settingStyle}>
									<Text
										onPress={this.searchData.bind(this,index)}
										style={{fontSize:20,marginTop:10}}>
										确定
									</Text>
									<Text
										onPress={this.setModalVisible.bind(this,false) }
										style={{fontSize:20,marginTop:10}}>
										关闭
									</Text>
								</View>
							</View>
						</View>
					</Modal>
      			</View>
            </View>
        )
    }
}

var width = WIN_WIDTH/2;
const styles = StyleSheet.create({
    container: {
       flex: 1,
       flexDirection: 'column',
       backgroundColor: 'white'
    },
	flex:{
    	flex:1,
  	},
    lineStyle: {
     // width:ScreenWidth/3,
     height: 2,
     backgroundColor: '#FF0000',
   },
   textMainStyle: {
     flex: 1,
     backgroundColor: 'white',
     padding: 10,
     paddingVertical:10,
     marginLeft: 5,
     marginRight: 5,
     marginVertical: 3,
     borderColor: '#dddddd',
     borderStyle: null,
     borderWidth: 0.5,
     borderRadius: 2,
     shadowColor: 'gray',    // 设置阴影
     shadowOffset: {width:0.5, height: 0.5},
     shadowOpacity: 0.4,   // 透明度
     shadowRadius: 1,
     elevation:2   //   高度，设置Z轴，可以产生立体效果
   },
   textHeaderStyle:{
    fontSize: 20,
    color: 'white',
   },

   headerText:{
        fontSize:16,
        fontWeight:"bold",
        textAlign:"right",
		marginTop:2,
		marginRight:10,
   },
   modalContainer:{
		flex: 1,
		justifyContent: 'center',
		padding: 40,
   },
   innerContainer: {
		borderRadius: 10,
		alignItems: 'center',
   },
   tips:{
		textAlign: 'center',
		marginBottom: 5,
		fontSize: 20
   },
   textInput: {
        height: 40,
        width: width,
        marginBottom: 5,
        backgroundColor: 'white',
        textAlign: 'center',
		borderRadius:5
   },
   settingStyle:{
        flexDirection:'row',
        justifyContent:'space-between',
        width:width - 10,

   },
});
module.exports = CostHisTabScene;
